<template>
  <div class="c-calendaer">
    <header>
      <div class="top">
        {{ title }}
      </div>
      <div class="bottom">
        <span class="flex-center" v-for="item in weekDays" :key="item">{{
          item
        }}</span>
      </div>
    </header>
    <main>
      <div v-for="item in weekDay" class="main-item" :key="item"></div>
      <div v-for="item in days" class="main-item" :key="item">
        <div v-if="item + 1 === d && isSignIn">
          <img
            src="https://oralhealthoss.axiling.com/mini/my/oral-health-sign-in-logo-08.png"
            alt=""
          />
        </div>
        <div v-else-if="signInDays.includes(item + 1)">
          <img
            src="https://oralhealthoss.axiling.com/mini/my/oral-health-sign-in-logo-05.png"
            alt=""
          />
        </div>
        <div
          v-else
          :class="item + 1 < d ? 'black' : item + 1 === d ? 'blue' : 'gary'"
        >
          {{ item + 1 }}
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { getDate } from './utils'
const [y, m, d, days, weekDay] = getDate()
export default {
  name: 'CCalendar',
  props: {
    isSignIn: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      title: `${y}年${m}月`,
      weekDays: ['日', '一', '二', '三', '四', '五', '六'],
      weekDay,
      days,
      d
    }
  },
  computed: {
    signInDays() {
      return this.defaultValue.map(item => new Date(item).getDate())
    }
  }
}
</script>

<style lang="scss" scoped>
.c-calendaer {
  padding: 30rpx 22rpx;
  width: 686rpx;
  height: 100%;
  header {
    .top {
      line-height: 50rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
      width: 100%;
      text-align: center;
    }
    .bottom {
      border-bottom: 1px solid #ededed;
      height: 70rpx;
      width: 100%;
      display: flex;
      span {
        flex: 1;
      }
    }
  }
  main {
    padding-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    .main-item {
      width: 14.285%;
      line-height: 70rpx;
      text-align: center;
      img {
        height: 68rpx;
        width: 68rpx;
      }
      div {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 400;
      }
    }
  }
  .black {
    color: #000;
  }
  .blue {
    color: #4280ff;
  }
  .gary {
    color: #cccccc;
  }
}
</style>
